<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2019/12/6
  Time: 18:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>多客管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .ms{position: absolute; bottom: 0;left: 0; width: 100%; height: 25px; text-align: center;
            filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;background: #000;color: white;}
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>新增产品集</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="${path}/promote/insert" id="form">
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">产品集名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" autocomplete="off" placeholder="" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">产品集位置</label>
                <div class="layui-input-block">
                    <select  name="placeId" id="placeId" autocomplete="off" lay-verify="required" lay-filter="place">
                        <option value="">请选择产品集位置</option>
                        <option value="1">精选</option>
                        <option value="2">玻尿酸(首页icon)</option>
                        <option value="3">肉霉素(首页icon)</option>
                        <option value="4">牙齿清洁(首页icon)</option>
                        <option value="5">胠质改善(首页icon)</option>
                        <option value="6">商品详情页</option>
                        <option value="7">严选</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="start" id="start" autocomplete="off" placeholder="请选择时间" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="over" id="over" autocomplete="off" placeholder="请选择时间" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item" style="height: 200px;">
                <label class="layui-form-label">产品集图片</label>
                <div class="layui-input-block">
                    <img src="https://aloss.duoke678.com/wechat/dkNew/upload/backstage/uploadImg.png" id="url" data-name="shareImage" width="100%" height="190px">
                    <span class="ms" style="width: 100%;">上传产品集图片</span>
                    <input type="hidden" name="pic" id="pic">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">关联产品</label>
                <div class="layui-input-block" id="promoteDiv">
                    <button class="layui-btn" onclick="addPromote()" type="button" style="margin-left: 30px">选择</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <div class="layui-input-block">
                <input type="radio" name="status" value="2" title="上线" lay-verify="required" checked="checked">
                <input type="radio" name="status" value="1" title="下线" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea rows="4" cols="50" placeholder="请输入内容" name="remark" style="height: 200px;width: 100%;margin-left: 10px;resize: none" id="remark"></textarea>
                </div>
            </div>
        </div>
    </div>
    <%--<div class="layui-row">--%>
        <%--<div class="layui-col-xs6">--%>
            <%--<div class="layui-form-item">--%>
                <%--<div style="text-align: center">--%>
                    <%--<button class="layui-btn" lay-submit="" lay-filter="sub" type="button" style="margin-right: 80px">提交</button>--%>
                    <%--<button class="layui-btn" onclick="history.back()" type="button" style="margin-left: 30px">返回</button>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
    <div class="layui-form-item layui-hide">
        <input type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</form>
</body>
<script src="../../static/lib/layui/layui.js"></script>
<script src="../../static/js/jquery.min.js"></script>
<script>
    layui.config({
        base: "../../static/js/"
    }).extend({
        index: 'index' //主入口模块
    }).use(["index", "form", "laydate", "upload"], function (){
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;

        //监听指定开关
        form.on('switch(switchBox)', function(data){
            this.checked ? $("#status").val(1):$("#status").val(0);
        });

        //设定文件大小限制
        upload.render({
            elem: "img[data-name='shareImage']"
            ,url: '${path}/upload/upload'
            ,size: 2048 //限制文件大小，单位 KB
            ,data:{uploadUrl:'temp/'}
            ,done: function(data,index,upload){
                if(data.code!=0){
                    layer.alert(data.msg,{icon:2});
                    return false;
                }
                $(this.item[0]).attr("src",data.data);
                $("#pic").val(data.data);
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start',
            trigger: 'click',
            type:'datetime'

        });
        //执行一个laydate实例
        laydate.render({
            elem: '#over',
            trigger: 'click',
            type:'datetime'
        });

        //监听提交
        // form.on('submit(sub)', function(data){
        //     var action = $("#form").attr("action");
        //     var pic = $("#pic").val();
        //     var promoteGoods = $("#promoteGoods").val();
        //     if(pic == null || pic == ''){
        //         layer.alert("请上传产品集图", {icon: 2});
        //         return false;
        //     }
        //     if(promoteGoods == null || promoteGoods == ''){
        //         layer.alert("请选择关联产品", {icon: 2});
        //         return false;
        //     }
        //     var index = layer.load(2);
        //     $.ajax({
        //         type:"post",
        //         url:action,
        //         dataType:"json",
        //         data:$('#form').serialize(),
        //         success:function(data){
        //             layer.close(index);
        //             if(data.code ==0){
        //                 layer.alert(data.msg,{icon:1}, function(){
        //                     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //                     parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
        //                     parent.layer.close(index); //再执行关闭
        //                 });
        //             }else{
        //                 layer.alert(data.msg,{icon:2});
        //             }
        //         },
        //         error:function (data) {
        //             layer.close(index);
        //         }
        //     });
        //     return  false
        // });
    });
    function addPromote() {
        layer.open({
            type: 2,
            area: ['800', '500'],
            fixed: false, //不固定
            maxmin: true,
            content: '/promote/addPromote'
        });
    }
    function addAegin() {
        layer.open({
            type: 2,
            area: ['800', '500'],
            fixed: false, //不固定
            maxmin: true,
            content: '/promote/addPromote?id='+$("#promoteGoods").val()
        });
    }
</script>
</html>
